<template>
  <div class="content">
  <div class="title">
      <h1 @click="addBtn(1)">学前了解</h1>
      <h1 @click="addBtn(2)">基础语法</h1>
      <h1 @click="addBtn(3)">vue3组件相关语法</h1>
      <h1 @click="addBtn(4)">vue3动画</h1>
      <h1 @click="addBtn(5)">vue3 api</h1>
      <h1 @click="addBtn(6)">vue3 工具</h1>
  </div>
  <div>
      <img class="img1" src="../../assets/zhishidian/V1_01学前了解.png" alt="">
      <img class="img2" src="../../assets/zhishidian/V1_02基础知识.png" alt="">
      <img class="img3" src="../../assets/zhishidian/V1_03组件相关语法.png" alt="">
      <img class="img4" src="../../assets/zhishidian/V1_04高级语法.png" alt="">
      <img class="img5" src="../../assets/zhishidian/V1_05高级语法.png" alt="">
      <img class="img6" src="../../assets/zhishidian/V1_06配套工具.png" alt="">
  </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        show:null
      }
    },
    methods:{
      addBtn(num){
        var el=document.getElementsByClassName(`img${num}`)[0];
        console.log(el.offsetTop);
        if(this.show==num){
          this.show=null
        }else{
          this.show=num
        //   this.$nextTick(function(){
        //   window.scrollTo({"behavior":"smooth","top":el.offsetTop})
        // })
        }
        this.$nextTick(function(){
          window.scrollTo({"behavior":"smooth","top":el.offsetTop})
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.content{
  width: 100%;
  height: 100%;

}
.title{
  position: fixed;
  top: 150px;
  left: 280px;
  color: #666666;
}
</style>